import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Progress} from 'antd';
//最新项目信息仪表概览
class Panel extends Component {
    render() {
        const { list } = this.props;
        return (
            <div className='panel-item'>
                {
                    list.map((item) => {
                        return (
                            <div className='panel bg-style' key={item.get('id')}>
                                <div className='main-title'>{item.get('title')}</div>
                                <div className='main-date'>{item.get('date')}</div>
                                <div className='percent'>{item.get('currentPercent')}/{item.get('sumPercent')}</div>
                                <div className='progress'>
                                    <Progress
                                        strokeColor={{from: item.get('progressColor'), to: item.get('progressColor'),}}
                                        percent={item.get('progressPercent')}
                                        status= {item.get('status')}
                                    />
                                </div>
                            </div>
                        );
                    })
                }
            </div>
        )
    }
}

const mapState = (state) => ({
    list: state.getIn(['panel','panelList'])
});

export default connect(mapState, null)(Panel);